<template>
  <div style="padding-left:20px;margin-top:15px;">
    <!-- 标题栏 -->
    <el-row style="font-size:22px;font-weight:bold;line-height:60px">
     <el-col :span="22"><span>用户管理</span></el-col>
     <el-col :span="2">
       <el-button type="primary" style="float:right;position:relative;top:5px;right:20px;" @click="beforeAddUser">新建用户</el-button>
     </el-col>
    </el-row>
    <!-- 新建用户弹窗 -->
    <el-dialog :title="dialogTitle" style="width:1000px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
      <el-form label-position="top" style="margin:10px;">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="用户名"><el-input placeholder="请输入用户名" v-model="saveUserForm.username" :disabled="saveUserForm.id!=null"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号"><el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱"><el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年龄"><el-input placeholder="请输入年龄" v-model="saveUserForm.age"></el-input></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="职级">
              <el-select placeholder="请选择" v-model="saveUserForm.level" @change="loadLeader">
                <el-option v-for="item in levelOptions" :label="item.label" :value="item.value"></el-option>
              </el-select></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="直属领导">
              <el-select placeholder="请选择" v-model="saveUserForm.parentId">
                <el-option v-for="item in leaderOptions" :label="item.username" :value="item.id"></el-option>
              </el-select></el-form-item>
          </el-col>
          <el-col :span="4.5">
            <el-form-item label="性别"><el-radio-group v-model="saveUserForm.gender">
              <el-radio border value="1" label="男" style="margin:1px"></el-radio>
              <el-radio border value="0" label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="用户状态"><el-radio-group v-model="saveUserForm.status">
                <el-radio border value="1" label="启用" style="margin:1px"></el-radio>
                <el-radio border value="0" label="禁用"></el-radio>
              </el-radio-group>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </template>
    </el-dialog>
<!--    查询栏-->
    <el-card style="width:99%;height:70px;font-weight:bold;">
      <el-form :inline="true" style="padding-right:50px;">
        <el-form-item label="用户搜索"><el-input placeholder="请输入用户名" v-model="searchUserForm.username" @keydown.enter="loadUser"></el-input></el-form-item>
        <el-form-item label="状态查询" style="width: 270px">
          <el-select placeholder="请选择用户状态" v-model="searchUserForm.status" @change="loadUser">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-right:10px;" @click="resetSearch"><el-button >重置</el-button></el-form-item>
        <el-form-item><el-button type="primary"  @change="loadUser">查询</el-button></el-form-item>
      </el-form>
    </el-card>
<!--    列表栏-->
    <el-card style="width:99%;margin-top:10px;">
      <el-table :data="userArr">
        <el-table-column type="index" label="编号" width="150px" align="center"></el-table-column>
        <el-table-column label="用户名" prop="username" width="250px" align="center"></el-table-column>
        <el-table-column label="手机号" prop="phone" width="250px" align="center"></el-table-column>
        <el-table-column label="加入时间" prop="createTime" width="450px" align="center"></el-table-column>
        <el-table-column label="用户状态" prop="status" width="200px" align="center">
          <template #default="scope">
            <el-switch active-value="1" inactive-value="0" v-model="scope.row.status" @change="changeStatus(scope.row.id,scope.row.status)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="resetPassword(scope.row.id)">密码重置</el-button>
            <el-button link type="primary" @click="editUser(scope.row.id)">编辑</el-button>
            <el-button link type="primary" @click="deleteUser(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

  const saveUserForm = ref({username:'',phone:'',email:'',age:'',level:'',parentId:'',gender:'',status:''});
  const searchUserForm = ref({username:'',status:''})
  const userArr = ref([]);
  const dialogVisible = ref(false);
  const dialogTitle = ref('新建用户');
  const levelOptions = ref([
      {label:'员工',value:'10'},
      {label:'经理',value:'20'},
      {label:'总监',value:'30'},
      {label:'总裁',value:'40'}
  ]);
  const leaderOptions =ref([]);
  onMounted(()=>{
    loadUser();
  });

  const loadUser = ()=>{
    let data = qs.stringify(searchUserForm.value);
    axios.get(BASE_URL+'/v1/user/select?'+data)
         .then((response)=>{
           if(response.data.code ==100){
             userArr.value = response.data.data;
           }else{
             ElMessage.error(response.data.msg);
           }
         });
  };
  const beforeAddUser = ()=>{
    dialogVisible.value = true;
    dialogTitle.value = '新建用户';
  };
  const saveUser = ()=>{
    let data = qs.stringify(saveUserForm.value);
    axios.post(BASE_URL+'/v1/user/save',data)
         .then((response)=>{
           if(response.data.code == 100){
             ElMessage.success(response.data.msg);
             dialogVisible.value = false;
             saveUserForm.value = {};
             loadUser();
           }else{
             ElMessage.error(response.data.msg);
           }
         })
  };
  const loadLeader = ()=>{
    leaderOptions.value = [];
    saveUserForm.value.parentId = '';
    let level = parseInt(saveUserForm.value.level)+10;
    axios.get(BASE_URL+'/v1/user/select?level='+level)
         .then((response)=>{
           if(response.data.code == 100){
             leaderOptions.value = response.data.data;
           }else{
             ElMessage.error(response.data.msg);
           }
         })
  }
  const handleClose = ()=>{
    if(confirm('您确认关闭窗口吗?')){
      dialogVisible.value = false;
      saveUserForm.value = {};
    }
  };

  const resetSearch = ()=>{
    searchUserForm.value = {};
    loadUser();
  };
const changeStatus = (id,status)=>{
  axios.post(BASE_URL+'/v1/user/update/status?id='+id+'&status='+status)
      .then((response)=>{
        if(response.data.code ==100){
          ElMessage.success('修改状态成功')
        }else{
          ElMessage.error(response.data.msg);
        }
      })
};
  const resetPassword = (id)=>{
    axios.post(BASE_URL+"/v1/user/update/password?id="+id)
        .then((response)=>{
          if(response.data.code ==100){
            ElMessage.success('密码重置成功');
          }else{
            ElMessage.error(response.data.msg);
          }
        })
  };
  const editUser = (id)=>{
  dialogVisible.value = true;
  dialogTitle.value = '编辑用户';
  axios.get(BASE_URL+"/v1/user/select?id="+id)
       .then((response)=>{
         if(response.data.code ==100){
           saveUserForm.value = response.data.data[0];
           let level = parseInt(saveUserForm.value.level)+10;
           axios.get(BASE_URL+'/v1/user/select?level='+level)
               .then((response)=>{
                 if(response.data.code == 100){
                   leaderOptions.value = response.data.data;
                 }else{
                   ElMessage.error(response.data.msg);
                 }
               })
         }else{
           ElMessage.error(response.data.msg);
         }
       })
  };
  const deleteUser = (id)=>{
    axios.get(BASE_URL+"/v1/user/select?id="+id)
        .then((response)=>{
          if(response.data.code ==100){
            let username = response.data.data[0].username;
            if(confirm('您确认要删除'+username+'吗？')){
              axios.post(BASE_URL+'/v1/user/delete?id='+id)
                  .then((response)=>{
                    if(response.data.code==100){
                      ElMessage.success('删除'+username+'成功！');
                    }else{
                      ElMessage.error(response.data.msg);
                    }
                  })
            }
          }else {
            ElMessage.error(response.data.msg);
          }
        })
  };

</script>

<style scoped>

</style>